<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" width="1200px" @open="onOpen" @close="onClose" :title="title">

      <el-descriptions class="margin-top" title="" :column="3" size="mini" border>
        <el-descriptions-item>
          <template slot="label">项目名称</template>{{ this.form.projectName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">项目类型</template>
          <dict-tag :options="dict.type.project_kind_id" :value="this.form.projectKindId" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">项目地址</template>{{ this.form.projectAddress }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">建筑垃圾种类</template>
          <dict-tag :options="dict.type.rubbish_type" :value="this.form.rubbishType" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处置面积</template>{{ this.form.disposalArea }}m²
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处置重量</template>{{ this.form.disposalWeight }}吨
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">垃圾预估量</template>{{ this.form.disposalPlanWeight }}吨
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">预约时间</template>{{ parseTime(this.form.bookingDate, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">车辆类别</template>
          <dict-tag :options="dict.type.car_type_id" :value="this.form.carType" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">预计车次</template>{{ this.form.carNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">资源化利用企业</template>{{ this.form.disposalLandName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位</template>{{ this.form.constructionDept }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位项目经理</template>{{ this.form.constructionPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位联系电话</template>{{ this.form.constructionPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">施工单位意见</template>{{ this.form.constructionSuggestion }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位</template>{{ this.form.supervisorDept }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位项目经理</template>{{ this.form.supervisorPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位联系电话</template>{{ this.form.supervisorPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">监理单位意见</template>{{ this.form.supervisorSuggestion }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">运输单位</template>{{ this.form.transportCompanyName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">运输单位联系人</template>{{ this.form.transportCompanyPerson }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">运输单位联系电话</template>{{ this.form.transportCompanyPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">运输单位意见</template>{{ this.form.transportCompanySuggestion }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">审批意见</template>{{ this.form.approvalDesc }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">审批时间</template>{{ parseTime(this.form.approvalDate) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">创建时间</template>{{ parseTime(this.form.createdDate, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">盖章图片</template>
          <image-preview-list :src="this.form.projectImages" :width=50 :height=50 />
        </el-descriptions-item>
      </el-descriptions>

      <el-form ref="elForm" :model="elForm" :rules="rules" size="medium" label-width="100px"
        style="margin-top: 30px;width:60%" v-if="!readonly">
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="elForm.status" size="medium">
            <el-radio label="1">通过</el-radio>
            <el-radio label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见" prop="approvalDesc">
          <el-input v-model="elForm.approvalDesc" type="textarea" placeholder="请输入审批意见" maxlength="100" show-word-limit
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="handleConfirm" v-if="!readonly">审批</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "ProjectReportDetail",
  inheritAttrs: false,
  dicts: ['approval_status', 'car_type_id', 'rubbish_type', 'project_kind_id'],
  components: {},
  props: {
    title: {
      type: String,
    },
    formData: {
      type: Object,
      default: () => { },
    },
    readonly: {
      type: Boolean,
    },
  },
  data () {
    return {
      form: {},
      elForm: {},
      rules: {
        status: [
          { required: true, message: "审核结果不能为空", trigger: "blur" }
        ],
        approvalDesc: [
          { required: true, message: "审核意见不能为空", trigger: "blur" }
        ],
      },
    }
  },
  computed: {},
  watch: {
    formData: function () {
      this.form = this.formData;
    },
  },
  created () { },
  mounted () { },
  methods: {
    onOpen () { },
    onClose () {
      this.$refs['elForm'].resetFields()
    },
    close () {
      this.$emit('update:visible', false)
    },
    handleConfirm () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return;
        this.$emit("commit", {
          ...this.elForm,
          id: this.form.id
        });
        this.close();
      })
    },
  }
}

</script>
<style></style>
